<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validateTrigger="bind" style="max-width: 100vw;">
			<uni-forms-item name="title" label="标题" required>
				<uni-easyinput placeholder="标题" v-model="formData.title" trim="both"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="avatar" label="封面">
				<uni-file-picker return-type="object" v-model="formData.avatar"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item name="content" label="文章内容" required>
				<toast-editor-v3 v-model="formData.content" />
			</uni-forms-item>
			<uni-forms-item name="description" label="文章简介">
				<uni-easyinput placeholder="文章简介" v-model="formData.description"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="view_count" label="阅读数量">
				<uni-easyinput placeholder="阅读数量" type="string" v-model="formData.view_count"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="publish_date" label="发表时间">
				<uni-datetime-picker return-type="timestamp" v-model="formData.publish_date"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item name="article_status" label="文章状态">
				<uni-data-checkbox v-model="formData.article_status" :localdata="formOptions.article_status_localdata"></uni-data-checkbox>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px" @click="submit">
					提交
				</button>
				<navigator open-type="navigateBack" style="margin-left: 15px">
					<button class="uni-button" style="width: 100px">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import { validator } from "../../js_sdk/validator/mysite-news.js";
	import ToastEditorV3 from "@/components/toast-editor-v3/toast-editor-v3.vue"
	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = "mysite-news";

	function getValidator(fields) {
		let result = {};
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key];
			}
		}
		return result;
	}

	export default {
		components:{
			ToastEditorV3
		},
		data() {
			let formData = {
				title: "",
				avatar: null,
				content: "",
				view_count: 50,
				publish_date: null,
				article_status: 1,
				description: "",
			};
			return {
				formData,
				formOptions: {
					article_status_localdata: [{
							value: 0,
							text: "草稿箱",
						},
						{
							value: 1,
							text: "已发布",
						},
					],
				},
				rules: {
					...getValidator(Object.keys(formData)),
				},
				editorOptions: {
					language: 'zh-CN'
				},
			};
		},
		onLoad(e) {
			if (e.id) {
				const id = e.id;
				this.formDataId = id;
				this.getDetail(id);
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		beforeDestroy() {
			// const editor = this.editor;
			// if (editor == null) return;
			// editor.destroy(); // 组件销毁时，及时销毁编辑器
		},
		methods: {
			/**
			 * 验证表单并提交
			 */
			submit() {
				uni.showLoading({
					mask: true,
				});
				this.$refs.form
					.validate()
					.then((res) => {
						return this.submitForm(res);
					})
					.catch(() => {})
					.finally(() => {
						uni.hideLoading();
					});
			},

			/**
			 * 提交表单
			 */
			submitForm(value) {
				value.content = this.formData.content;
				// 使用 clientDB 提交数据
				return db
					.collection(dbCollectionName)
					.doc(this.formDataId)
					.update(value)
					.then((res) => {
						uni.showToast({
							title: "修改成功",
						});
						this.getOpenerEventChannel().emit("refreshData");
						setTimeout(() => uni.navigateBack(), 500);
					})
					.catch((err) => {
						uni.showModal({
							content: err.message || "请求服务失败",
							showCancel: false,
						});
					});
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true,
				});
				db.collection(dbCollectionName)
					.doc(id)
					.field(
						"title,avatar,content,description,view_count,publish_date,article_status"
					)
					.get()
					.then((res) => {
						const data = res.result.data[0];
						if (data) {
							this.formData = data;
						}
					})
					.catch((err) => {
						uni.showModal({
							content: err.message || "请求服务失败",
							showCancel: false,
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
		},
	};
</script>